<template>
    <LoadPage :show="show" />
    <view class="main">
        <view class="top">
            <image class="bg" src="/static/mine/mbg.png" mode="aspectFill" />
            <view class="content">
                <view class="one dispaly-just-between">
                    <view class="title">我的余额（元）</view>
                    <view class="not" @click="$goUrl('/subPackage/mine/withdrawalAudit')">
                        <image src="/static/mine/notice.png" mode="aspectFill" />
                        <view class="num dispaly-align-center">{{ num }}</view>
                    </view>
                </view>
                <view class="money">{{ userInfo.balance || 0 }}</view>
                <view class="tx dispaly-align-center" @click="$goUrl('/subPackage/mine/withdraw')">
                    <view class="dispaly-center">
                        <view class="txt">提现</view>
                        <view class="icon">
                            <nut-icon size="15" custom-color="#CC0E28" name="rect-right"></nut-icon>
                        </view>
                    </view>
                </view>
                <view class="code dispaly-center" @click="$goUrl('/subPackage/mine/codeSetting')">
                    <image src="/static/mine/code.png" mode="aspectFill" />
                    <view class="c-txt">提款码</view>
                </view>
            </view>
        </view>
        <Empty v-if="!dataList.length" />
        <view v-else class="list">
            <view class="item dispaly-center" v-for="item in dataList" :key="item.id">
                <view class="left-icon">
                    <image src="/static/mine/qb.png" mode="aspectFill" />
                </view>
                <view class="right dispaly-just-between">
                    <view class="r-l">
                        <view class="name">{{ item.type == 1 ? '佣金' : '提现' }}</view>
                        <view class="time">{{ item.createTime }}</view>
                    </view>
                    <view class="r-r">{{ item.type == 1 ? '+' + item.money : '-' + item.money }}</view>
                </view>
            </view>
        </view>
        <LoadMore :status="status" v-if="dataList.length" />
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getUserInfo } from '@/api/apiList';
import { onShow } from '@dcloudio/uni-app';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { bgList, sNumber } from '@/api/apiList'

const dataList = ref([])
let queryTwo = reactive({
    pageNum: 1,
    pageSize: 8,
    userId: ''
})
let status = ref('noMore')
let show = ref(true)
const getDataList = async () => {
    status.value = 'loading';
    queryTwo.userId = userInfo.value.userId
    const res = await bgList(queryTwo)
    if (res.code == 200) {
        if (res.rows.length) {
            dataList.value = [...dataList.value, ...res.rows]
            status.value = 'noMore'
        } else {
            status.value = 'noMore'
        }
        show.value = false
    }
}

onLoad(() => {
    // getDataList()
})

onReachBottom(() => {
    queryTwo.pageNum++
    getDataList()
})

onPullDownRefresh(async () => {
    uni.showLoading({
        title: '加载中',
        icon: 'none'
    })
    dataList.value = []
    queryTwo.pageNum = 1
    getUser()
    await getDataList()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})

// 获取小铃铛
let num = ref('')
const getNumber = async () => {
    const res = await sNumber()
    if (res.code == 200) {
        num.value = res.data
    }
}

const userInfo = ref({})
const getUser = async () => {
    const res = await getUserInfo()
    if (res.code == 200) {
        userInfo.value = res.data
        uni.setStorageSync('user', userInfo.value)
    }
}

onShow(async () => {
    dataList.value = []
    await getUser()
    getDataList()
    getNumber()
})



</script>
<style lang="scss" scoped>
.main {
    padding: 30rpx;

    .list {
        .item {
            background: #FFFFFF;
            border-radius: 16rpx;
            padding: 40rpx 30rpx;
            margin-bottom: 30rpx;

            .left-icon {
                margin-right: 17rpx;

                image {
                    width: 38rpx;
                    height: 34rpx;
                }

            }

            .right {
                width: 100%;

                .r-r {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 30rpx;
                    color: #111111;
                }

                .r-l {
                    .name {
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: bold;
                        font-size: 30rpx;
                        color: #111111;
                    }

                    .time {
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: 500;
                        font-size: 22rpx;
                        color: #999999;
                    }
                }
            }
        }
    }

    .top {
        position: relative;

        .bg {
            width: 692rpx;
            height: 282rpx;
        }

        .content {
            position: absolute;
            top: 42rpx;
            left: 50rpx;
            width: 580rpx;

            .one {
                .title {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #FFFFFF;
                }

                .not {
                    position: relative;

                    image {
                        width: 32rpx;
                        height: 36rpx;
                    }

                    .num {
                        position: absolute;
                        right: -10rpx;
                        top: -10rpx;
                        border-radius: 50%;
                        width: 26rpx;
                        height: 26rpx;
                        background: #FFFFFF;
                        font-size: 16rpx;
                    }
                }
            }

            .money {
                margin-top: 20rpx;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 60rpx;
                color: #FFFFFF;
            }

            .code {
                margin-top: 20rpx;

                image {
                    width: 45rpx;
                    height: 45rpx;
                    margin-right: 10rpx;
                }

                .c-txt {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #FFFFFF;
                }
            }

            .tx {
                position: absolute;
                right: -58rpx;
                bottom: 29rpx;
                width: 179rpx;
                height: 79rpx;
                background: #FFFFFF;
                box-shadow: 5rpx 0rpx 7rpx 0rpx #A8322C;
                border-radius: 33rpx 0rpx 0rpx 33rpx;

                .icon {
                    margin-top: 10rpx;
                }

                .txt {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 30rpx;
                    color: #CC0E28;
                }
            }
        }
    }
}
</style>